new Vue({
    el: '#sendMessageButton',
    methods: {
        send() {
            let res = this;
            $(this).css('pointer-events', 'none');
            let name = $("#name").val().trim();
            let content = $("#content").val().trim();
            let content_length = content.length;
            let name_length = name.length;
            if (!name && !content) {
                this.$message({
                    message: '请输入您的姓名和留言内容',
                    type: 'info',
                    center: true,
                    offset: 4,
                });
            } else if (!name) {
                this.$message({
                    message: '请输入您的姓名',
                    type: 'info',
                    center: true,
                    offset: 4,
                });
            } else if (!content) {
            } else {
                if (name_length > 32) {
                    this.$message({
                        message: '你的名字太长了，已超出32个字符的限制',
                        type: 'error',
                        center: true,
                        offset: 4,
                    });
                } else if (content_length > 1024) {
                    this.$message({
                        message: `你一共写了${content_length}个字，已超出1024个字符的限制`,
                        type: 'error',
                        center: true,
                        offset: 4,
                    });
                } else {
                    $("#content").val('');
                    // let ip = `${returnCitySN["cname"]}（${returnCitySN["cip"]}）${navigator.userAgent.toLowerCase()}`;
                    let ip = `${navigator.userAgent.toLowerCase()}`;
                    $.ajax({
                        type: "POST",
                        dataType: "text",
                        url: 'https://www.helloxjn.com/api/db_content',
                        data: {
                            "name": name,
                            "content": content,
                            "ip": ip
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            res.$message({
                                title: '发送失败',
                                message: `服务器出问题了，留言发送失败！`,
                                type: 'error',
                                center: true,
                                offset: 4,
                            });
                        },
                        success: function (msg) {
                            res.$notify({
                                title: '已发送',
                                message: `谢谢你的留言！`,
                                type: 'success',
                                center: true,
                            });
                        }
                    });
                }
            }
            $(this).css('pointer-events', 'auto');
        },
    }
})
